<template>
  <div>
    <Manage>
      <template #upCard>
        <el-form label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="司机账号">
                <el-input v-model="page.account" placeholder="请输入司机账号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="司机姓名">
                <el-input v-model="page.name" placeholder="司机手机号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="司机手机号">
                <el-input v-model="page.phone" placeholder="司机手机号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属机构">
                <Treeselect
                  v-model="page.agentId"
                  :options="tree"
                  :normalizer="normalizer"
                  placeholder="请输入所属机构"
                  :append-to-body="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" size="" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #downCard>
        <el-table
          v-loading="loading"
          :data="DriverData"
          stripe
          :header-cell-style="{background:'#f8faff',color:'#818693'}"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column prop="account" label="司机账号" />
          <el-table-column prop="name" label="司机姓名" />
          <el-table-column prop="mobile" label="司机电话" />
          <el-table-column prop="truck" label="所属机构">
            <template #default="{row}">
              <span v-if="row.truck">{{ row.truck['licensePlate'] || '' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="agency" label="所属机构">
            <template #default="{row}">
              <span>{{ row.agency.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isAvailable" label="工作状态">
            <template #default="{row}">
              <div :class="row.workStatus?'green-status':'red-status'">{{ row.workStatus?'上班':'下班' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200px">
            <template #default="{row}">
              <!-- <a href="javascript:void(0);" style="color:#419eff;">作业范围分配</a> -->
              <router-link
                style="color:#419eff;"
                :to="{path:'/transit/driver-detail',
                      query:{id:row.userId,formUrlName: $route.meta.title},}"
              >查看</router-link>
              <div class="line" />
              <a href="javascript:void(0);" style="color:#419eff;" @click="allotTruck(row)">配置车辆</a>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            :current-page="page.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </template>
    </Manage>

    <!-- 配置司机 -->
    <el-dialog title="配置司机" :visible.sync="showDriver">
      <div style="background-color:#fbfafa;width:584;height:90px;padding:21px 21px">
        <div class="truckInfo">
          <el-col :span="12">司机编号：{{ driverInfo.userId }}</el-col>
          <el-col :span="12">司机名称：{{ driverInfo.name }}</el-col>
          <el-col :span="12">司机电话：{{ driverInfo.mobile }}</el-col>
          <el-col v-if="driverInfo.agency" :span="12 ">所属机构{{ driverInfo.agency.name }}</el-col>
        </div>
      </div>
      <el-form style="margin:12px 0">
        <el-form-item label="配置车辆">
          <el-select v-model="driverSelect" multiple style="width:50%">
            <el-option v-for="item in unWorkingTrucks" :key="item.id" :label="item.licensePlate" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-table
        :data="selectTrucks"
        stripe
        :header-cell-style="{background:'#f8faff',color:'#818693'}"
      >
        <template slot="empty">
          <img src="@/assets/img/empty.png" alt="">
          <p>这里空空如也</p>
        </template>
        <el-table-column prop="licensePlate" label="车牌号" />
        <el-table-column prop="workStatus" label="车辆状态" />
        <el-table-column label="操作">
          <template #default="{row}">
            <!-- <a href="javascript:void(0);" style="color:#419eff;">查看</a> -->
            <router-link
              style="color:#419eff;"
              :to="{path:'/transit/vehicle-detail',query:{id:row.id,formUrlName:$route.meta.title},}"
            >查看</router-link>
            <div class="line" />
            <a href="javascript:void(0);" style="color:#f56c6c;" @click="del(row.id)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" style="margin-top:15px">
        <el-button type="primary">确认</el-button>
        <el-button>取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getOrgizationTree } from '@/api/ogization'
import { getDriver, getUnWorkingTrucks } from '@/api/employee'
export default {
  data() {
    return {
      page: {
        page: 1,
        pageSize: 10,
        account: null,
        name: null,
        phone: null,
        agentId: null
      },
      counts: 0,
      tree: [],
      DriverData: [],
      loading: false,
      driverInfo: {},
      unWorkingTrucks: [],
      driverSelect: [],
      showDriver: false
    }
  },
  computed: {
    selectTrucks() {
      return this.unWorkingTrucks.filter(item => this.driverSelect.includes(item.id))
    }
  },
  created() {
    this.initTree()
    this.initDriverData()
    this.initUnWorkTruck()
  },
  methods: {
    // 下拉树结构
    async initTree() {
      const res = await getOrgizationTree()
      this.tree = JSON.parse(res)
    },
    // 快递员管理表格
    async initDriverData() {
      this.loading = true
      try {
        const res = await getDriver(this.page)
        // console.log(res)
        this.DriverData = res.items
        this.counts = +res.counts
      } catch (error) {
        this.loading = false
      }
      this.loading = false
    },
    normalizer(node) {
      // 当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children && node.children.length > 0 ? node.children : 0
      }
    },
    // 搜索
    search() {
      this.initDriverData()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageSize = val
      this.initDriverData()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.initDriverData()
    },
    reset() {
      this.page = {
        page: 1,
        pageSize: 10,
        account: null,
        name: null,
        phone: null,
        agentId: null
      }
      this.initCourierData()
    },
    // 配置车辆
    allotTruck(row) {
      const h = this.$createElement
      this.$msgbox({
        title: '车辆配置',
        message: h('p', null, [
          h('p', null, '配置车辆需满足以下条件'),
          h('div', { style: 'display: flex;flex-wrap:wrap' }, [
            h('span', { style: 'width:180px' }, '车辆信息已完善'),
            h('span', { style: 'width:180px' }, '司机已设置排班'),
            h('span', { style: 'width:180px' }, '司机绑定车辆未在启用状态')
          ])
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        this.driverInfo = row
        this.showDriver = true
      })
    },
    // 没有工作车辆信息
    async initUnWorkTruck() {
      this.unWorkingTrucks = await getUnWorkingTrucks()
    },
    // 删除车辆配置
    del(id) {
      this.driverSelect = this.driverSelect.filter(item => item !== id)
    }
  }
}
</script>

<style lang="scss" scoped>
.green-status::before{
    content: "";
    width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.red-status::before{
    content: "";
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
  ::v-deep .el-dialog{
    width: 600px;
    border-radius: 8px;
    .el-dialog__header {
      border-radius: 8px;
      background-color: #f3f4f7;
      span{
        color: #000;
      }
    }
    .el-dialog__body {
      padding-right: 60px;
    }
  }
</style>
